import { useState, useEffect ,Component } from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from 'recharts';

const YourComponent = () => {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch('./1.txt')
      .then(response => response.text())
      .then(text => {
        setData(processData(text));
      })
  }, []);
  
  const processData = txt => {
    const rows = txt.split('\n');
    const newArray = rows.slice(1);
    newArray.pop();
    const data = newArray.map(row => {
      const [name, kraken_assigned_reads] = row.split('\t');
      return { name, kraken_assigned_reads: parseInt(kraken_assigned_reads) };
    });
    return data;
  }

  return (    
   
            <BarChart width={1500} height={600} data={data}>     
             <XAxis dataKey="name" />      
             <YAxis />     
              <CartesianGrid strokeDasharray="3 3" />      
              <Tooltip />      
              <Legend />      
              <Bar dataKey="kraken_assigned_reads" fill="#8884d8" />    
              </BarChart>  
        );}
    
    export default YourComponent;

